<template>
    <div class="workorder">
       <div class="main-child">
           <div class="txun">今日客户服务指标</div>
           <div class="stytr1 common" ref="stytr1">
               <!-- <div class="leftsvg">
                   <el-progress type="circle" id="left-progress" :stroke-width="3" style="width:70%;height:60%" :percentage="oneserve" color="#ff6661"></el-progress>
                   <div style="position: absolute;bottom:8%;left:16%"><span class="callback commonblock"></span><span>&nbsp; 服务回访满意度</span></div>
               </div>
               <div class="leftsvg">
                   <el-progress type="circle" id="conent-progress" :stroke-width="3" :percentage="twoserve" color="#8370fe" style="width:70%;height:60%"></el-progress>
                   <div style="position: absolute;bottom:8%;left:22%"><span class="respones commonblock"></span><span>&nbsp; 响应及时率</span></div>
               </div>
               <div class="leftsvg">
                   <el-progress type="circle" id="right-progress" :stroke-width="3" :percentage="threeserve" color="#00a0ea" style="width:70%;height:60%" ></el-progress>
                   <div style="position: absolute;bottom:8%;left:30%"><span class="close commonblock"></span><span>&nbsp; 关闭率</span></div>
               </div> -->
           </div>
           <div class="txun addtop">本月人员工作饱和度</div>
           <div class="stytr2 addtop common">
               <div class="mutually">
                   <div id="onecanvas" style="width: 100%;height: 45%;position:absolute;bottom:5%;left:-4%" ref="main"></div>
               </div>
           </div>
       </div>
    </div>
</template>
<script>
var echarts = require("echarts");
import { debounce } from "../../../utils";
export default {
  name: "workorder",
  data() {
    return {
      chart: null,
      charttwo: null,
      oneserve: 2,
      twoserve: 85,
      threeserve: 78,
      effectiveManHour: [],
      saturatedManHour: [],
      oneinterval:1,
      twointerval:2,
      threeinterval:3
    };
  },
  mounted() {
    // 模拟获取数据步骤
    this.saturatedManHour = [176, 176, 176, 176, 176, 176];
    this.effectiveManHour = [160, 171, 168, 133, 141, 172];
    this.onedatadManHour = 2;

    this.initChart();
    this.datacontrol({
      startval:78,     //起始值
      endval:100,       //结束值
      addval:-0.02,     //增加值
      point:2,        //小数点
      name:'threeserve',//名称
      time:2000,     //时间间隔
      timer: 'oneinterval'
    });
    this.datacontrol({
      startval:85,     //起始值
      endval:100,       //结束值
      addval:0.02,     //增加值
      point:2,        //小数点
      name:'twoserve',//名称
      time:2000,     //时间间隔
      timer: 'twointerval'
    });
    this.datacontrol({
      startval:2,     //起始值
      endval:5,       //结束值
      addval:0.1,     //增加值
      point:1,        //小数点
      name:'oneserve',//名称
      time:5000,     //时间间隔
      timer: 'threeinterval'
    });
    this.initChart3(this.oneserve, this.twoserve, this.threeserve)
    // 宽度变化，echarts自适应--暂无效果：echarts宽度固定
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize();
        this.charttwo.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHanlder);
  },
  beforeCreate () {
    clearInterval(this.oneinterval);
    clearInterval(this.twointerval);
    clearInterval(this.threeinterval);
  },
  beforeDestroy() {
    clearInterval(this.oneinterval);
    clearInterval(this.twointerval);
    clearInterval(this.threeinterval);
    // 若 chart 存在，则取消绑定事件
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // 创建定时器： 模拟数据变化
    datacontrol({startval,endval,addval,point,name,time,timer}){
      console.log(this[timer])
       this[timer] = setInterval(()=>{
          this[name] = Number((startval += addval).toFixed(point))
          if(this[name] === endval){
            clearInterval(this.threeinterval);
          }
          console.log(this.oneserve, this.twoserve, this.threeserve)
          this.initChart3(this.oneserve, this.twoserve, this.threeserve)
      },time)
    },
    // 图表渲染
    initChart() {
      let _this = this;
      this.chart = echarts.init(this.$refs.main);
      let workData = [];
      for (let i = 0; i < this.effectiveManHour.length; i++) {
        workData.push();
      }
      // option
      this.chart.setOption({
        color: ["#8370fe"],
        tooltip: {
          formatter: function(params, ticket, callback) {
            if (params.seriesType === "line") {
              return `本月人员工作饱和度${(
                params.value /
                _this.saturatedManHour[params.dataIndex] *
                100
              ).toFixed(0)}%`;
            } else if (params.seriesName === "月人均有效工时") {
              return `月人均有效工时为${params.value}小时`;
            }
          }
        },
        legend: {
          data: ["工作饱和度", "月人均有效工时"],
          selectedMode:false,
          textStyle: {
            color: "#ccc"
          },
          x: "center",
          y: "bottom"
        },
        xAxis: {
          // data: category,
          data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"],
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          }
        },
        yAxis: {
          show: false
        },
        series: [
          {
            name: "工作饱和度",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 6,
            data: this.effectiveManHour,
            itemStyle: {}
          },
          {
            name: "月人均有效工时",
            type: "bar",
            barWidth: 9,
            itemStyle: {
              normal: {
                barBorderRadius: 51,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#14c8fd" },
                  { offset: 1, color: "#14c8fd" }
                ])
              }
            },
            data: this.effectiveManHour
          },
          {
            name: "line",
            type: "bar",
            barGap: "-100%",
            barWidth: 9,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(23,205,255,0.2)" },
                  { offset: 0.9, color: "rgba(23,205,255,0.2)" },
                  { offset: 1, color: "rgba(23,205,255,0.2)" }
                ])
              }
            },
            z: -12,
            data: this.saturatedManHour
          },
          {
            name: "dotted",
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              normal: {
                color: "#0f375f",
                shadowBlur: 20,
                shadowColor: "#14c8fd",
                show: true
              }
            },
            symbolRepeat: true,
            symbolSize: [7, 4],
            symbolMargin: 1,
            z: -10,
            data: this.saturatedManHour
          }
        ]
      });
    },
    initCharttwo() {
      var dataStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          // shadowBlur: 40
          // shadowColor: 'rgba(229, 232, 237, 0.5)',
        }
      };

      var placeHolderStyle = {
        normal: {
          color: "rgba(229,232,237,1)", // 未完成的圆环的颜色
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        emphasis: {
          color: "rgba(255,255,255,1)" // 未完成的圆环的颜色
        }
      };
      let _this = this;
      this.charttwo = echarts.init(this.$refs.statesdata);
      this.charttwo.setOption({
        series: [
          {
            name: "Pie1",
            type: "pie",
            clockWise: false,
            radius: [80, 85],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["25%", "50%"],
            data: [
              {
                value:this.onedatadManHour,
                label: {
                  normal: {
                    formatter: function(params) {
                      return params.value + "分";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "35",
                      fontWeight: "normal",
                      color: "#ff6761"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#ff6761"
                  }
                }
              },
              {
                value: 5,
                name: "invisible",
                itemStyle: placeHolderStyle
              }
            ]
          }
        ]
      });
    },
    initChart3(percent1, percent2, percent3) {
      this.chart3 = echarts.init(this.$refs.stytr1);

      let colors = ["#ff6661", "#8370fe", "#00a0e9"]
      let data = [percent1, percent2, percent3]
      let name = ['服务回访满意度', '响应及时率', '关闭率']

      let seriesData = []
      for (let i = 0; i < name.length; i++) {
        let all = 0
        let myFormatter = ""
        if (i === 0) {
          all = 5
          myFormatter = "{c}分"
        } else {
          all = 100
          myFormatter = "{c}%"
        }
        seriesData.push({
            name: name[i],
            type: "pie",
            radius: ["55%", "60%"],
            center: [`${16.5 + 33.3 * i}%`, "45%"],
            label: {position: 'center'},
            data: [
              { value: data[i], name: name[i], itemStyle:{color: colors[i]}, label:{formatter: myFormatter, color: colors[i], padding: [20, 0, 0, 0], fontSize: 16}},
              { value: all - data[i], name: "占位", hoverAnimation: false, tooltip: {show: false},  itemStyle:{color: '#373838'}, label: {show:false}}
            ]
          })
      }
      
      this.chart3.setOption({
        color: colors,
        tooltip: {
          trigger: "item"
        },
        legend: {
          left: 'center',
          bottom: '10',
          selectedMode:false,
          data: name,
          textStyle: {
            color: '#fff'
          }
        },
        series: seriesData
      })
    },
  }
};
</script>

<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$iconcolor: #ff6661;
$iconcolor1: #8370fe;
$iconcolor2: #00a0ea;
$iconcolor3: #8370fd;
$iconcolor4: #15cdff;
$mrtop: 13px;
.workorder {
  height: 100%;
  margin-top: 50px;
  width: 27%;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 0px;
  overflow-y: hidden;
  .main-child {
    height: 66%;
    width: 100%;
    position: absolute;
    padding: 0px 40px 0px 0px;
    //  background-color: saddlebrown;
    top: 17%;
    .addtop {
      margin-top: $mrtop;
    }
    .txun {
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left: 25px;
      background: url("../../../assets/img/titlebj.png") no-repeat;
      background-size: 100% 100%;
      color: $colorwhite;
      font-size: 0.15rem;
    }
    .common {
      width: 94%;
      margin-left: 3%;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
    }
    .stytr1 {
      height: 31%;
      // width: 100%;
      .leftsvg {
        float: left;
        text-align: center;
        width: 33.3%;
        height: 100%;
        padding-top: 5%;
        position: relative;
        .callback {
          background-color: $iconcolor;
        }
        .respones {
          background-color: $iconcolor1;
        }
        .close {
          background-color: $iconcolor2;
        }
      }
      .commonblock {
        height: 10px;
        width: 10px;
        display: inline-block;
        margin-top: 10px;
      }
    }
    .stytr2 {
      height: 46%;
      // width: 100%;
      .mutually {
        height: 100%;
        width: 100%;
      }
    }
  }
  .icon-fangda {
    width: 40px;
    height: 40px;
    background-color: #212020;
    position: absolute;
    right: 0px;
    top: 0px;
    color: white;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
}
</style>